<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>sunJsona的个人博客</title>

  <!-- keywords -->
  

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="禁止IOS文字变链接处理办法 在测试中发现iPad上的Safari总会把长串数字识别为电话号码，文字变成蓝色，点击还会弹出菜单添加到通讯录。 别的地方倒也罢了，如果在用户名中出现数字（手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”），版式会很恶心。 经过测试在a标签中的长串数字不会识别为电话，于是给出现用户名但没有链接的地方嵌套一个无动作的a标签，临时解决了这个问题。 但是这样增加了额">
<meta property="og:type" content="article">
<meta property="og:title" content="sunJsona的个人博客">
<meta property="og:url" content="https://xiaochangzai.github.io/2020/07/07/禁止IOS文字变链接处理办法/index.html">
<meta property="og:site_name" content="sunJsona的个人博客">
<meta property="og:description" content="禁止IOS文字变链接处理办法 在测试中发现iPad上的Safari总会把长串数字识别为电话号码，文字变成蓝色，点击还会弹出菜单添加到通讯录。 别的地方倒也罢了，如果在用户名中出现数字（手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”），版式会很恶心。 经过测试在a标签中的长串数字不会识别为电话，于是给出现用户名但没有链接的地方嵌套一个无动作的a标签，临时解决了这个问题。 但是这样增加了额">
<meta property="og:locale" content="Simple Chinese">
<meta property="og:updated_time" content="2020-07-07T05:00:13.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="sunJsona的个人博客">
<meta name="twitter:description" content="禁止IOS文字变链接处理办法 在测试中发现iPad上的Safari总会把长串数字识别为电话号码，文字变成蓝色，点击还会弹出菜单添加到通讯录。 别的地方倒也罢了，如果在用户名中出现数字（手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”），版式会很恶心。 经过测试在a标签中的长串数字不会识别为电话，于是给出现用户名但没有链接的地方嵌套一个无动作的a标签，临时解决了这个问题。 但是这样增加了额">
  
    <link rel="alternative" href="/atom.xml" title="sunJsona的个人博客" type="application/atom+xml">
  
  
    <link rel="icon" href="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg">
  
  <link rel="stylesheet" href="/css/style.css">
  
  

  <script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>
  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

  
</head>
<body>
  <div id="container">
    <div id="particles-js"></div>
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">sunJsona</a></h1>
		</hgroup>

		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						<div class="icon-wrap icon-link hide" data-idx="2">
							<div class="loopback_l"></div>
							<div class="loopback_r"></div>
						</div>
						
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>标签</li>
						
						<li>友情链接</li>
						
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/">主页</a></li>
				        
							<li><a href="/archives">所有文章</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						
					</div>
				</section>
				
				
				
				<section class="switch-part switch-part3">
					<div id="js-friends">
					
			          <a target="_blank" class="main-nav-link switch-friends-link" href="https://github.com/smackgg/hexo-theme-smackdown">smackdown</a>
			        
			        </div>
				</section>
				

				
			</div>
		</div>
	</header>				
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide">sunJsona</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">sunJsona</h1>
			</hgroup>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/archives">所有文章</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div class="body-wrap"><article id="post-禁止IOS文字变链接处理办法" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/禁止IOS文字变链接处理办法/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="禁止IOS文字变链接处理办法"><a href="#禁止IOS文字变链接处理办法" class="headerlink" title="禁止IOS文字变链接处理办法"></a>禁止IOS文字变链接处理办法</h2><hr>
<p>在测试中发现iPad上的Safari总会把长串数字识别为电话号码，文字变成蓝色，点击还会弹出菜单添加到通讯录。</p>
<p>别的地方倒也罢了，如果在用户名中出现数字（手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”），版式会很恶心。</p>
<p>经过测试在a标签中的长串数字不会识别为电话，于是给出现用户名但没有链接的地方嵌套一个无动作的a标签，临时解决了这个问题。</p>
<p>但是这样增加了额外的标签，代码的语义性变得很差，而且对大段文字不能用这个方法。</p>
<p>今天无意中撞进Safari的官网，发现了safari有个私有meta属性可以解决这个问题：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"format-detection"</span> <span class="attr">content</span>=<span class="string">"telephone=no"</span> /&gt;</span></span><br></pre></td></tr></table></figure>
<p>官网的说明如下： </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">How do I disable automatic detection of phone numbers in webpages? In Safari on iPhone, phone numbers are automatically detected and transformed into links that dial the phone number when tapped. If you have strings of numbers in your webpage that should not be automatically detected as phone numbers, you can choose to disable this feature on the entire page by adding the meta tag shown in Listing 12.</span><br></pre></td></tr></table></figure>

      
    </div>
    
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2020/07/07/用hexo搭建博客/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">&lt;</strong>
      <div class="article-nav-title">
        
          用hexo搭建博客
        
      </div>
    </a>
  
  
    <a href="/2020/07/07/设计资源/设计网站大全/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title"></div>
      <strong class="article-nav-caption">&gt;</strong>
    </a>
  
</nav>

  
</article>


<div class="ds-share share" data-thread-key="禁止IOS文字变链接处理办法" data-title="" data-url="https://xiaochangzai.github.io/2020/07/07/禁止IOS文字变链接处理办法/"  data-images="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" data-content="">
    <div class="ds-share-inline">
      <ul  class="ds-share-icons-16">
      	<li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">分享到：</a></li>
        <li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">微博</a></li>
        <li><a class="ds-qzone" href="javascript:void(0);" data-service="qzone">QQ空间</a></li>
        <li><a class="ds-qqt" href="javascript:void(0);" data-service="qqt">腾讯微博</a></li>
        <li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">微信</a></li>
      </ul>
      <div class="ds-share-icons-more">
      </div>
    </div>
 </div>
 





</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <div class="footer-left">
        &copy; 2022 sunJsona
      </div>
        <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/smackgg/hexo-theme-smackdown" target="_blank">Smackdown</a>
        </div>
    </div>
  </div>
</footer>
    </div>
    
  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">


<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>
<script src="/js/main.js"></script>



<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js"></script>


  </div>
</body>
</html>